/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import {
  Form, Input, Radio, Select, Icon,
  Upload, Descriptions, DatePicker,
} from 'antd';
import {connect} from 'dva';
import moment from 'moment'
import request from '@/utils/request';
import ZImg from 'react-zmage';
import FullCalendar from '@fullcalendar/react' // must go before plugins
import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!
import "@fullcalendar/daygrid/main.css";
import timeGridPlugin from "@fullcalendar/timegrid";
import "@fullcalendar/timegrid/main.css";
const FormItem = Form.Item;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const Option = Select.Option;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList:[],
      all_staffs:[],
    };
  }

  componentDidMount() {
    const that=this;
    request(`/all_staffs`, {
      method: 'GET',
    }).then((response)=> {
      console.log('all_structures', response)
      if(response.status===200){
        that.setState({
          all_staffs:response.data.data
        })
      }
    })
  }
  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 6},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 15},
      }
    };

    const {getFieldDecorator} = this.props.form;
    return (
      <div>
        <Form>
          <Descriptions  column={4}   className={'blue-descriptions'}
                         title={<div style={{textAlign:'center'}}>车辆信息</div>} bordered>
            <Descriptions.Item label="车辆照片"  span={2}>
              <ZImg style={{height:'60px'}} src={'https://img1.bitautoimg.com/autoalbum/files/20210619/45/20210619428_8.jpg'}/>
            </Descriptions.Item>
            <Descriptions.Item label="车牌号"  span={2}>
              粤A235645
            </Descriptions.Item>
            <Descriptions.Item label="车辆编号"  span={2}>
              <div style={{width:'200px'}}>2021212122</div>
            </Descriptions.Item>
            <Descriptions.Item label="品牌"  span={2}>
              <div style={{width:'200px'}}>丰田</div>
            </Descriptions.Item>
            <Descriptions.Item label="车辆类型"  span={2}>
              SUV
            </Descriptions.Item>
            <Descriptions.Item label="乘坐人数"  span={2}>
              5
            </Descriptions.Item>

          </Descriptions>
          <FullCalendar
            plugins={[dayGridPlugin, timeGridPlugin]}
            initialView="dayGridMonth"
            header={{
              // 上一年，上一月，下一月，下一年 今天(逗号为紧相邻，空格为有间隙，不写哪个就不展示哪个按钮)
              left: "prevYear,prev,next,nextYear today",
              // 默认显示当前年月
              center: "title",
              // 右侧月 周 天切换按钮
              right: "dayGridMonth,timeGridWeek,timeGridDay"
            }}
            events={[
              { title: 'event 1', date: '2021-06-29' },
              { title: 'event 2', date: '2021-06-30' }
            ]}
            locale='zh-cn'
            buttonText={{
              today: '今天',
              month: '月',
              week: '周',
              day: '天'
            }}
            allDayText='全天'
          />
          <Descriptions  column={4}   className={'blue-descriptions'} style={{marginTop:'10px'}}
                         title={<div style={{textAlign:'center'}}>预定信息</div>} bordered>
            <Descriptions.Item label="申请人"  span={4}>
              <div style={{width:'200px'}}>买买提</div>
            </Descriptions.Item>
            <Descriptions.Item label="开始时间"  span={2}>
              <DatePicker style={{width:'100%'}} showTime={{ format: 'HH:00:00' }} format={'YYYY-MM-DD HH:00:00'}/>
            </Descriptions.Item>
            <Descriptions.Item label="结束时间"  span={2}>
              <DatePicker style={{width:'100%'}} showTime={{ format: 'HH:00:00' }} format={'YYYY-MM-DD HH:00:00'}/>
            </Descriptions.Item>
            <Descriptions.Item label="事由"  span={4}>
              <div>
                {getFieldDecorator('remark', {
                  initialValue: this.props.editRecord?this.props.editRecord.remark:'',
                })(
                  <Input style={{width:'100%'}}/>
                )}
              </div>
            </Descriptions.Item>
          </Descriptions>

          <Descriptions  column={4}   className={'blue-descriptions'} style={{marginTop:'10px'}}
                         title={<div style={{textAlign:'center'}}>选择审批人</div>} bordered>
            <Descriptions.Item label="审批人"  span={4}>
              {getFieldDecorator('user_id', {
                initialValue: this.props.editRecord?[]:[],
              })(
                <Select style={{minWidth:'200px'}} mode="multiple" showSearch>
                  {
                    this.state.all_staffs.map((item,index)=>{
                      return <Option key={index} value={`${item.id}${item.name}`}>
                        {item.name}
                      </Option>
                    })
                  }
                </Select>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="抄送给"  span={4}>
              {getFieldDecorator('copy_id', {
                initialValue: this.props.editRecord?[]:[],
              })(
                <Select style={{minWidth:'200px'}} mode="multiple" showSearch>
                  {
                    this.state.all_staffs.map((item,index)=>{
                      return <Option key={index} value={`${item.id}${item.name}`}>
                        {item.name}
                      </Option>
                    })
                  }
                </Select>
              )}
            </Descriptions.Item>
          </Descriptions>
        </Form>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


